<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>团购</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="./css/css-comment.css">
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/jquery-weui.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/swiper-4.3.3.min.css">
    <script src="js/vue2.5.16.js"></script>
    <style>
        .weui-tabbar {
            position: fixed;
            bottom: 0;
            background: #fff;
        }

        .weui-toast {
            margin-left: 0;
        }
    </style>
</head>
<body>
<div id="home">
    <div class="home-com">
        <!--轮播图-->
        <broadcast-swiper :broadcast="broadcast"></broadcast-swiper>
        <zh-nav :nav="nav"></zh-nav>
        <!--精选商品-->
        <div style="margin-bottom: .5rem">
            <div class="wrap-title">
                <h3>精选商品</h3>
            </div>
            <div class="business-box">
                <div class="business-list clearfix" v-for="item in GroupPurchase">
                    <p class="storeTitle">{{item.title}}</p>
                    <div class="businessImg">
                        <img :src="item.img" :alt="item.storeName">
                    </div>
                    <div class="business-com">
                        <div class="com-use">{{item.use}}</div>
                        <p class="characteristic">{{item.characteristic}}</p>
                        <p class="date">{{item.date}}</p>
                        <div class="com-list">
                            <p>
                                <span class="price">￥{{item.price}}</span>
                                <span class="com-Discount">{{item.Discount}}折</span>
                                <span class="OriginalPrice">￥{{item.OriginalPrice}}</span>
                            </p>
                            <button @click="openGroup" class="com-btn">立即开团</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/swiper-4.3.3.min.js"></script>
<script src="js/broadcast.js"></script>
<script src="js/nav.js"></script>
<script>
    new Vue({
        el: "#home",
        data: {
            broadcast: [
                "./images/banner.png"
            ],
            nav: [
                {img: "./images/nav1.png", text: "食品特产"},
                {img: "./images/nav2-2.png", text: "服装鞋帽"},
                {img: "./images/nav3-3.png", text: "美妆个护"},
                {img: "./images/nav4-4.png", text: "家居生活"},
                {img: "./images/nav5-5.png", text: "箱包皮具"},
                {img: "./images/nav6-6.png", text: "母婴玩具"},
                {img: "./images/nav7-7.png", text: "数码电器"},
                {img: "./images/nav8-8.png", text: "健康养生"},
            ],
            GroupPurchase: [
                {
                    img: "./images/tuan.png",
                    title: "老苏州大客堂",
                    use: "2-3人套餐",
                    characteristic: "特色松鼠鱼、银耳炒鸡蛋、干锅有机花菜、杂菌本…",
                    date: "周一至周日可用",
                    price: "15",
                    Discount: "9",
                    OriginalPrice: "25"

                },
                {
                    img: "./images/tuan.png",
                    title: "老苏州大客堂",
                    use: "2-3人套餐",
                    characteristic: "特色松鼠鱼、银耳炒鸡蛋、干锅有机花菜、杂菌本…",
                    date: "周一至周日可用",
                    price: "15",
                    Discount: "9",
                    OriginalPrice: "25"
                },
            ],

        },
        methods: {
            openGroup:function () {
                window.location.href = 'GroupPurchase_detail.html'
            }
        }
    })
</script>
</html>